<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>随喜建庙</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="css/banner.css" rel="stylesheet" />
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body > 
    <div class="suixi-pay">
        <!-- 顶部 -->
        <div class="top">
            <h4>随喜建庙<a href=""><span class="iconfont">&#xe60e;</span></a></h4>  
        </div>
        
        <!-- 随喜背景 -->
        <div class="suixi-pay-intr">
            <h4>慈悲喜舍 广种福田</h4>
        </div>

        <form action="">
             <!-- 随喜金额选择 -->
            <div class="suixi-pay-select">
                <div class="clearfix">
                    <div class="suixi-pay-list">
                        <span>1元</span>
                    </div>
                
                    <div class="suixi-pay-list">
                        <span>10元</span>
                    </div>
                
                    <div class="suixi-pay-list">
                        <span>50元</span>
                    </div>
                
                    <div class="suixi-pay-list">
                        <span>88元</span>
                    </div>
                
                    <div class="suixi-pay-list">
                        <span>100元</span>
                    </div>
                
                    <div class="suixi-pay-list">
                        <span>500元</span>
                    </div>
                </div>
            </div>

            <!-- 随喜金额自定义 -->
            <div class="suixi-pay-set">
                <div class="form-group clearfix">
                    <label for="">自定义金额</label>
                    <input type="number" placeholder="请输入你要捐赠的金额">
                </div>  
            </div>

            <!-- 美好的祝福 -->
            <textarea name="" class="" placeholder="请留下您最好的祝福!" ></textarea>

            <div class="form-group container">
                <input type="submit" value="布  施">
            </div>  
        </form>
    </div>

    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(".suixi-pay-list").click(function(){
           $(".active").removeClass("active");
           $(this).addClass("active");
        })
    </script>
</body>
</html>
